<template>
  <view class="menu-group" :class="{'no-margin': noMargin, 'no-shadow': noShadow}">
    <!-- 标题区域 -->
    <view class="group-header" v-if="title || $slots.title">
      <slot name="title">
        <text class="group-title">{{ title }}</text>
        <text class="group-subtitle" v-if="subtitle">{{ subtitle }}</text>
      </slot>
    </view>
    
    <!-- 内容区域 -->
    <view class="group-content" :class="{'no-padding': noPadding}">
      <slot></slot>
    </view>
    
    <!-- 底部区域 -->
    <view class="group-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  // 标题相关
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  
  // 样式控制
  noMargin: {
    type: Boolean,
    default: false
  },
  noShadow: {
    type: Boolean,
    default: false
  },
  noPadding: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.menu-group {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  &.no-margin {
    margin-bottom: 0;
  }
  
  &.no-shadow {
    box-shadow: none;
  }

  .group-header {
    padding: 30rpx 40rpx 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .group-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .group-subtitle {
      font-size: 26rpx;
      color: #999;
      margin-left: 20rpx;
    }
  }

  .group-content {
    &.no-padding {
      padding: 0;
    }
  }

  .group-footer {
    padding: 20rpx 40rpx;
    border-top: 1rpx solid #f5f5f5;
    font-size: 26rpx;
    color: #666;
  }
}
</style>